<template>
  <div>
    <h3>VOS客户端登录</h3>
    <div style="margin-bottom: 20px;">
      <h4>vos登陆系统标识</h4>
      <div style="padding: 10px; background: #f5f5f5; border-radius: 4px;">
        {{ identifier || '正在加载...' }}
      </div>
    </div>
    <div style="display: flex; align-items: center;">
      <el-input
          v-model="port"
          placeholder="请输入端口号"
          style="width: 100px; margin-bottom: 20px; margin-right: 10px;"
      ></el-input>
      <span style="font-size: 12px; color: #666;">
        默认VOS客户端登录端口为1202，如果修改了该端口，请在此输入正确的端口。
      </span>
    </div>
    <el-button @click="handleTrigger">执行登录操作</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api'
import { ElMessage } from 'element-plus'

// 定义端口号的响应式变量
const port = ref('')
// 定义系统标识的响应式变量
const identifier = ref('')

// 在组件挂载时从服务端获取初始端口号和系统标识
onMounted(async () => {
  try {
    const [portRes, identifierRes] = await Promise.all([
      api.getPort(),
      api.getVOSIdentifier()
    ])
    
    if (portRes.data.status === 1) {
      port.value = portRes.data.data.port // 从 data 中获取 port
    } else {
      ElMessage.error(portRes.data.message || '获取端口号失败')
    }
    
    if (identifierRes.data.status === 1) {
      identifier.value = identifierRes.data.data.identifier
    } else {
      ElMessage.error(identifierRes.data.message || '获取系统标识失败')
    }
  } catch (error) {
    ElMessage.error('请求失败，请检查网络')
  }
})

// 校验端口号
const validatePort = (port) => {
  const portNum = Number(port)
  return (
      !isNaN(portNum) &&
      portNum >= 1024 &&
      portNum <= 65535 &&
      String(portNum) === port.trim()
  )
}

// 处理登录操作
const handleTrigger = async () => {
  if (!validatePort(port.value)) {
    ElMessage.error('端口号无效，必须是 1024-65535 之间的数字')
    return
  }

  try {
    const res = await api.triggerVOS(port.value)
    ElMessage[res.data.status === 1 ? 'success' : 'error'](res.data.message)
  } catch (error) {
    ElMessage.error('请求失败，请检查网络')
  }
}
</script>